<template>
  <div class="order-details">
    <h1>订单详情</h1>

    <!-- 如果订单数据加载成功，则显示订单详情 -->
    <div v-if="order && orderItems.length">
      <div class="order-summary">
        <h2>订单号: {{ order.orderNumber }}</h2>
        <p><strong>客户名称:</strong> {{ order.customerName }}</p>
        <p><strong>总金额:</strong> ¥{{ order.totalAmount.toFixed(2) }}</p>
        <p><strong>订单状态:</strong> {{ order.status }}</p>
        <p><strong>创建时间:</strong> {{ order.createDate }}</p>
      </div>

      <!-- 如果有订单项则显示 -->
      <div class="order-items">
        <h3>订单项</h3>
        <table>
          <thead>
          <tr>
            <th>书名</th>
            <th>作者</th>
            <th>数量</th>
            <th>单价</th>
            <th>总价</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item, index) in orderItems" :key="index">
            <td>{{ item.book.bookName }}</td>
            <td>{{ item.book.author }}</td>
            <td>{{ item.quantity }}</td>
            <td>¥{{ item.book.price.toFixed(2) }}</td>
            <td>¥{{ item.totalPrice.toFixed(2) }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 如果没有数据，则显示加载中 -->
    <div v-else-if="loading">
      <p>加载中...</p>
    </div>

    <!-- 如果发生错误，显示错误信息 -->
    <div v-if="error" class="error">{{ error }}</div>
  </div>
</template>

<script>
import axiosInstance from '../utils/axios.js'; // 引入配置好的 axios 实例

export default {
  data() {
    return {
      order: null, // 存储订单信息
      orderItems: [], // 存储订单项
      loading: true, // 加载状态
      error: null, // 错误信息
    };
  },
  props: {
    orderNumber: {
      type: String,
      required: true, // 确保 orderNumber 是必须的
    },
  },
  methods: {
    async fetchOrderDetails(orderNumber) {
      console.log("打印的订单号:", orderNumber); // 打印传入的订单号

      // 如果没有传入 orderNumber，则显示错误并结束
      if (!orderNumber) {
        this.error = '订单号无效！';
        this.loading = false;
        return;
      }

      try {
        this.loading = true; // 开始加载

        // 获取订单基本信息
        const orderResponse = await axiosInstance.get(`/orders/${orderNumber}`);
        if (orderResponse.data) {
          console.log("订单:", orderResponse.data);
          this.order = orderResponse.data.data;
        }

        // 获取订单项信息
        const itemsResponse = await axiosInstance.get(`/order-items/on/${orderNumber}`);
        if (itemsResponse.data) {
          this.orderItems = itemsResponse.data.data;
        }

        // 如果数据没有加载出来
        if (!this.order || !this.orderItems.length) {
          this.error = '订单数据加载失败，请稍后再试';
        }

      } catch (error) {
        this.error = '加载订单详情失败，请稍后再试！';
        console.error(error);
      } finally {
        this.loading = false; // 请求完成，隐藏加载状态
      }
    },
  },
  watch: {
    // 监听 orderNumber 的变化，重新加载数据
    orderNumber(newOrderNumber) {
      if (!newOrderNumber) {
        this.error = '订单号无效！';
        this.loading = false;
      } else {
        this.fetchOrderDetails(newOrderNumber);
      }
    },
  },
  created() {
    // 如果没有 orderNumber，设置错误信息
    if (!this.orderNumber) {
      this.error = '订单号无效！';
      this.loading = false;
      return;
    }

    // 使用 props 传递的 orderNumber 加载数据
    this.fetchOrderDetails(this.orderNumber);
  },
};
</script>

<style scoped>
.order-details {
  font-family: Arial, sans-serif;
  margin: 20px;
}

.order-summary {
  margin-bottom: 20px;
}

.order-summary h2 {
  color: #333;
}

.order-items {
  margin-top: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

table, th, td {
  border: 1px solid #ddd;
}

th, td {
  padding: 10px;
  text-align: left;
}

th {
  background-color: #f4f4f4;
}

td {
  font-size: 14px;
}

.loading {
  text-align: center;
  font-size: 18px;
}

.error {
  color: red;
  font-size: 16px;
  text-align: center;
}
</style>
